<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="style/style.css" />
    <title>DEMO</title>
</head>

<body>
    <div class="title">zg_wechat_sdk</div>
    <!-- 内容 -->
    <div class="info_content">
        <div class="item">
            <label>头像</label>
            <img id="headImg">
        </div>
        <div class="item">
            <label>昵称</label>
            <label id="name" class="val">null</label>
        </div>
        <div class="item">
            <label>国家</label>
            <label id="country" class="val">null</label>
        </div>
        <div class="item">
            <label>所在城市</label>
            <label id="city" class="val">null</label>
        </div>
    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="dist/zg_wechat_sdk.js"></script>
    <script type="text/javascript">
        var code = ZGWeChatSDK.utils.getQueryString('code')
        var config = {
            appID: 'wxa2840d0838300e73',
            user_info_url: 'http://download02.chinanorth.cloudapp.chinacloudapi.cn/api/get-userinfo',
            signature_url: 'http://download02.chinanorth.cloudapp.chinacloudapi.cn/api/get-signature'
        }
        var sdk = ZGWeChatSDK.getInstance(config)

        if (code == null) {
            sdk.gotoAuthPage()
        } else {
            sdk.getUserInfo(code).then(function (response) {
                document.getElementById('headImg').src = response.data.headimgurl
                document.getElementById('name').innerText = response.data.nickname
                document.getElementById('country').innerText = response.data.country
                document.getElementById('city').innerText = response.data.city
            })
        }
    </script>
</body>

</html>